<template>
  <view v-if="!disabled" class="toolbar-container mb-12" @click.self="emit('click')">
    <view class="item-content px-16">
      <slot />
    </view>
    <view v-if="showToolbar" class="form-toolbar" @click.stop="() => {}">
      <template v-for="(item, index) in toolbarList" :key="index">
        <view class="toolbar-item disFlxCC" @click="emit('toolbarBtnClick', item.type)">
          <text class="ali-icon">{{ item.icon }}</text>
          <text>{{ item.name }}</text>
        </view>
      </template>
    </view>
  </view>
  <slot v-else />
</template>

<script setup lang="ts">
  import { propTypes } from '@/utils/propTypes';
  import { ref, watch } from 'vue';

  export type ToolbarType = 'edit' | 'copy' | 'up' | 'down' | 'delete';

  defineProps({
    disabled: propTypes.bool.def(true),
    showToolbar: propTypes.bool.def(false),
  });

  const toolbarList = ref<{ type: ToolbarType, icon: string, name: string}[]>([
    {
      type: 'edit',
      icon: '\ue687',
      name: '编辑',
    },
    {
      type: 'copy',
      icon: '\ue6a2',
      name: '复制',
    },
    {
      type: 'up',
      icon: '\ue67d',
      name: '上移',
    },
    {
      type: 'down',
      icon: '\ue67e',
      name: '下移',
    },
    {
      type: 'delete',
      icon: '\ue686',
      name: '删除',
    },
  ]);

  const emit = defineEmits<{
    (e: 'click'): void;
    (e: 'toolbarBtnClick', type: ToolbarType): void;
  }>();
</script>

<style lang="scss" scoped>
  .toolbar-container {
    .item-content {
      background-color: #fff;
      overflow: hidden;
      border-radius: 16rpx;
    }
    .form-toolbar {
      margin-top: -16rpx;
      height: 128rpx;
      background-color: #333333;
      border-radius: 0 0 16rpx 16rpx;
      display: flex;
      align-items: center;
      color: #fff;
      .toolbar-item {
        flex: 1;
        font-size: 24rpx;
        .ali-icon {
          font-size: 48rpx;
          margin-bottom: 8rpx;
        }
      }
    }
  }
</style>
